<template>
  <div class="shaoma">
    <stepBar length=20></stepBar>
    <div class="yb-number">
      <div class="input-box flex-box">
        <p>样本编号</p>
        <input type="text" id="yb-number-input" v-model="ybNum" placeholder="点击上方按钮扫一扫或手动输入">
      </div>
    </div>
    <div class="shaoma-area">
      <div>
        <div @click="wxInit" class="shaoma-msg flex-box">
          <h4><span>点此扫码</span><i>请扫描知情同意书上方的条形码</i></h4>
        </div>
      </div>
      <button id="check-view" @click="tcShow = !tcShow">查看示例</button>
    </div>
    <div class="shaoma-footer flex-box">
      <button @click="toForma" class="commit active">下一步</button>
    </div>
    <tanChuang ref="tanChuang" v-if="tcShow" :img="tanChuang.img" :showType="tcShow" @tcClothe="tcClothe"></tanChuang>
  </div>
</template>
<script>
import Vue from "vue";
import stepBar from "@/components/StepBar.vue";
import tanChuang from "@/components/TanChuang.vue";
import iconQjy01 from "@/assets/img/icon-qjy-01.png";
import wx from "weixin-js-sdk";
Vue.use(wx);
const STORAGE_KEY = "formStartMsg";
export default {
  data() {
    return {
      wxLists: "",
      tcShow: false,
      ybNum: "",
      tanChuang: {
        img: iconQjy01
      },
      storageLists: this.$localStorage.fetch(STORAGE_KEY)
    };
  },
  components: {
    stepBar,
    tanChuang
  },
  watch: {
    storageLists: {
      handler: function(storageLists) {
        this.$localStorage.save(STORAGE_KEY, storageLists);
      },
      deep: true
    }
  },
  computed: {},
  methods: {
    tcClothe() {
      this.tcShow = false;
    },
    wxInit() {
      let self = this;
      console.log(window.WXappId);
      console.log(this.wxLists);
      // $.ajax({
      //   type: "GET",
      //   dataType: "JSON",
      //   url:
      //     this.$API.api + "/app/index.php?i=3&c=entry&do=jssdkconfig&m=tech_superarticle&url=https://www.ihuada.com/app/index.php?i=3&c=entry&m=nifty&do=mobile&d=WGSAppointment&f=getEnter#/shaoma",
      //   success: result => {
      //     console.log(result);
      //     // this.wxLists = result;
      //     wx.config({
      //       debug: true,
      //       appId: result.appId,
      //       timestamp: result.timestamp,
      //       nonceStr: result.nonceStr,
      //       signature: result.signature,
      //       jsApiList: ["scanQRCode"]
      //     });
      //     this.wxQRInt();
      //     console.log(this.$route.path);
      //     console.log(window.location.href);
      //   }
      // });
      // console.log(this.$store.state.wxInfo.wxAppId);
      console.log(
        window.WXappId,
        window.WXtimestamp,
        window.WXnonceStr,
        window.WXsignature
      );
      wx.config({
        // debug: true,
        appId: window.WXappId,
        timestamp: window.WXtimestamp,
        nonceStr: window.WXnonceStr,
        signature: window.WXsignature,
        jsApiList: ["scanQRCode"]
      });
      wx.ready(function() {
        wx.scanQRCode({
          needResult: 1,
          desc: "scanQRCode desc",
          success: function(res) {
            let result = res.resultStr;
            console.log(result);
            // alert(result);
            if (result.indexOf(",") > 0) {
              self.ybNum = result.split(",")[1];
            } else {
              self.ybNum = result;
            }
          }
        });
      });
      wx.error(function(err) {
        alert(JSON.stringify(err));
      });
    },
    toForma() {
      if (this.ybNum === "") {
        this.$layer.open({
          content: "请输入样本编码",
          skin: "msg",
          time: 2
        });
        return false;
      } else {
        window.localStorage.removeItem("formStartMsg");
        setTimeout(() => {
          this.storageLists = this.ybNum;
        }, 0);
        setTimeout(() => {
          console.log(this.$localStorage.fetch(STORAGE_KEY));
          this.$router.push("/sjforma");
        }, 10);
      }
    }
  },
  mounted() {
    // window.localStorage.removeItem("formStartMsg");
    this.ybNum = window.localStorage.formStartMsg
      ? JSON.parse(window.localStorage.formStartMsg)
      : this.ybNum;
    // console.log(vm.wxAppId);
  }
};
</script>
<style lang="scss" scoped>
.shaoma {
  width: 100%;
  height: 100vh;
  .yb-number {
    width: 100%;
    padding-left: r(15);
    padding-right: r(15);
    box-sizing: border-box;
    .input-box {
      justify-content: space-between;
    }
    p {
      font-size: r(16);
      color: #717276;
      letter-spacing: 0;
    }
    input {
      text-align: right;
      width: r(248);
    }
  }
  .shaoma-area {
    width: 100%;
    padding-left: r(15);
    padding-right: r(15);
    padding-top: r(22);
    box-sizing: border-box;
    & > img {
      width: 100%;
    }
    & > div {
      padding-bottom: 49%;
      background: url(../assets/img/bg-shaoma.png) center no-repeat;
      background-size: 100%;
      border-radius: r(12);
      position: relative;
      .shaoma-msg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: r(12);
        background: rgba($color: #000000, $alpha: 0.5);
        color: #fff;
        flex-wrap: wrap;
        h4 {
          span {
            font-size: r(28);
            width: 100%;
            display: inline-block;
            text-align: center;
            margin-bottom: r(20);
          }
          i {
            font-size: r(14);
            opacity: 0.5;
          }
        }
      }
    }
    #check-view {
      border: none;
      outline: none;
      color: #66b9fe;
      background: none;
      padding: r(24);
      margin-top: r(2);
      text-decoration: underline;
    }
  }
}
</style>
